<?php
use yii\helpers\Html;

?>

<div class="yx-cnt-box yx-praise-content yx-radius2" style="margin-bottom: 10px;">
    <div class="yx-praise-box">
        <h3 class="yx-menubar">好评率统计:</h3>
        <div class="yx-square-praise">
            <div class="bar-container yx-floatl">
                <div id="skillset" class="eight columns ">
                    <div class="bars MT30">
                        <div class="bar-1"></div>
                        <input type="hidden" name="square-score-now" id="square-score-now"
                               value="<?= $score_detail ?>"/>
                        <div class="bar-2"></div>
                        <input type="hidden" name="square-score-all" id="square-score-all"
                               value="<?= $score_detail_last ?>"/>
                    </div>
                </div>
            </div>
            <div class="yx-intro yx-floatl">
                <div class="yx-rate-box1">
                    <span class="yx-blocks yx-bg78dd8c yx-floatl "></span>
                    <h3 class="yx-comment yx-floatl"><span class="yx-percent">80.1%-100%</span>棒棒哒，继续努力！</h3>
                    <div class="yx-clear"></div>
                </div>
                <div class="yx-rate-box1">
                    <span class="yx-blocks yx-bg94b5ff yx-floatl"></span>
                    <h3 class="yx-comment yx-floatl"><span class="yx-percent">60.1%-80%</span>仍需努力！</h3>
                    <div class="yx-clear"></div>
                </div>
                <div class="yx-rate-box1">
                    <span class="yx-blocks yx-bgff79c5 yx-floatl"></span>
                    <h3 class="yx-comment yx-floatl"><span class="yx-percent">0%-60%</span>差强人意哦！</h3>
                    <div class="yx-clear"></div>
                </div>
            </div>
            <div class="yx-clear"></div>
        </div>
        <div class="yx-bgf7f7f7 yx-pl40">
            <h4 class="yx-teacher-praise yx-floatl">按机构统计：</h4>
            <div class="yx-function">
                <?= Html::beginForm(\common\components\helpers\Fun::url(['positive/index']), 'get', ['class' => 'yx-width43']) ?>
                <?= \common\components\helpers\Search::textInput('mechanic_name', null, ['label' => '机构名称', 'class' => 'yx-input-text yx-input-text1', 'id' => 'teachername']); ?>
                <?= \common\components\helpers\Search::submitButton('搜索', ['id' => 'search-handle', 'class' => "yx-search1 yx-radius2"]); ?>
                <?= Html::endForm() ?>

                <a href="<?= \common\components\helpers\Fun::url(['positive/index', 'sort' => -1]) ?>">
                    <button class="yx-toptolow yx-radius2" type="button">由高到低 ↑</button>
                </a>
                <a href="<?= \common\components\helpers\Fun::url(['positive/index', 'sort' => 1]) ?>">
                    <button class="yx-lowtotop yx-radius2" type="button">由低到高 ↓</button>
                </a>

            </div>
            <div class="yx-clear"></div>
        </div>
        <div class="yx-praise-list-box zx-mg">
            <input type="hidden" name="count-data" id="count-data" value="<?= count($data) ?>"/>
            <?php foreach ($data as $k => $v) { ?>
                <?php if ($v['score_detail_last'] != 0 || $v['score_detail'] != 0) { ?>
                    <div class=" yx-praise-item yx-width198 yx-radius2"><a
                                href="<?= \common\components\helpers\Fun::url(['positive/indexteacher', 'mechanic_id' => $v['id']]) ?>">
                            <div class="yx-bgf7f7f7 yx-jigou-name"><?= $v['mechanic_name'] ?></div>
                            <div class="nine columns">
                                <div class="bars MT30 jg-bars" style="height:176px;">
                                    <div class="bar-<?= $k ?>-all">
                                        <input type="hidden" name="all_value" id="all-value-<?= $k ?>"
                                               value="<?= $v['score_detail_last'] ?>"/>
                                    </div>
                                    <div class="bar-<?= $k ?>-now">
                                        <input type="hidden" name="all_value" id="now-value-<?= $k ?>"
                                               value="<?= $v['score_detail'] ?>"/>
                                    </div>
                                </div>
                            </div>
                            <button class="yx-look yx-radius50" type="button">查看详情</button>
                        </a>
                    </div>
                <?php } ?>
            <?php } ?>
        </div>
    </div>
</div>
<?php
$js = <<<JS
            var square_score_now = $('#square-score-now').val();
            var square_score_all = $('#square-score-all').val();
                
            var square_color_now = change_color(square_score_now);
            var square_color_all = change_color(square_score_all);
               
            if($(window).width() > 414){
                $('.bar-1').jqbar({ label: '广场本月好评率', value: square_score_now, barColor: square_color_now,barLength: 200});
                $('.bar-2').jqbar({ label: '广场上月好评率', value: square_score_all, barColor: square_color_all,barLength: 200 });
            }else{
                $('.bar-1').jqbar({ label: '广场本月好评率', value: 98.8, barColor: '#78dd8c',barLength: 120});
                $('.bar-2').jqbar({ label: '广场累上月评率', value: 86.1, barColor: '#94b5ff',barLength: 120 });            
            }
            $(".jg-bars div:nth-child(2n)").css({"top":'40px',"left":"84px"});
            $(".jg-bars div:nth-child(2n+1)").css({"top":'40px',"left":"56px"});
            
            var count_data = $('#count-data').val() - 1;
            for(var i = 0;i<=count_data;i++){
                var score_all = $('#all-value-'+i).val();
                var score_now = $('#now-value-'+i).val();
                
                var color_all = change_color(score_all);
                var color_now = change_color(score_now);
                if(score_all != 0 || score_now != 0){
                    $('.bar-'+i+'-all').jqbar({ label: '上月', value: score_all, barColor: color_all, orientation: 'v' });
                    $('.bar-'+i+'-now').jqbar({ label: '本月', barColor: color_now, value: score_now, orientation: 'v' });
                }
                
            }
            
            function change_color(score) {
                var color = '';
                if(score <=60){
                    color = '#ff79c5'
                } else if(score > 80){
                    color = '#78dd8c';
                }else{
                    color = '#94b5ff';
                }
                return color;
            }
            
            
            
            
           

JS;
$this->registerJS($js);
?>
